// pages/poster/poster.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cardInfo: {
      //backgroundImage: "http://pic26.photophoto.cn/20130108/0005018334407557_b.jpg",
      backgroundImage: "http://pic26.photophoto.cn/20130108/0005018334407557_b.jpg",
      QRcode: "http://i4.hexun.com/2018-07-05/193365388.jpg",
      tagText: "test"

    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取头像，用于生成海报
    this.getProfilePhoto()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  getProfilePhoto: function () {
    console.log("step1")
    wx.showLoading({
      title: "生成中...",
      mask: true
    })
    var that = this;
    wx.downloadFile({
      url: that.data.cardInfo.backgroundImage, //背景图片
      success: function (res) {
        console.log("step2");
        wx.hideLoading();//什么函数？
        if (res.statusCode === 200) {
          var profilePhotoSrc = res.tempFilePath;//下载成功返回结果
          that.getQrCode(profilePhotoSrc);//继续下载二维码图片
        } else {
          console.log("step2.2")
          wx.showToast({
            title: "背景图片下载失败！",
            icon: "none",
            duration: 2000,
            success: function (res) {
              var profilePhotoSrc = "";
              that.getQrCode(profilePhotoSrc);
            }
          })
        }
      }
    })
  },

  /**
   * 下载二维码图片
   */
  getQrCode: function (profilePhotoSrc) {
    wx.showLoading({
      title: "生成中",
      mask: true
    });
    var that = this;
    wx.downloadFile({
      url: that.data.cardInfo.QRcode,
      success: function (res) {
        wx.hideLoading();
        if (res.statusCode === 200) {
          var codeSrc = res.tempFilePath;
          that.sharePosterCanvas(profilePhotoSrc, codeSrc);
        } else {
          wx.showToast({
            title: "二维码下载失败！",
            icon: "none",
            duration: 2000,
            success: function () {
              var codeSrc = "";
              that.sharePosterCanvas(profilePhotoSrc, codeSrc);
            }
          })
        }
      }
    })
  },

  /**
   * 开始用canvas制作分享海报
   * @param avatarSrc 下载的头像图片路径
   * @param codeSrc   下载的二维码图片路径
   */
  sharePosterCanvas: function (avatarSrc, codeSrc) {
    wx.showLoading({
      title: "生成中...",
      mask: true
    })
    var that = this;
    var cardInfo = this.data.cardInfo;//需要绘制的数据集合
    const ctx = wx.createCanvasContext("myCanvas");//创建画布
    var width = "";
    wx.createSelectorQuery().select("#canvas-container").boundingClientRect(function (rect) {
      var height = rect.height;
      var right = rect.right;
      width = rect.width * 0.8;
      var left = rect.left + 5;
      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, rect.width, height);

      //头像为正方形
      if (avatarSrc) {
        ctx.drawImage(avatarSrc, left, 20, width, width);
        ctx.setFontSize(14);
        ctx.setFillStyle('#fff');
        ctx.setTextAlign('left');
      }

      //标签
      if (cardInfo.tagText) {
        ctx.fillText(cardInfo.tagText, left + 20, width - 4);
        const metrics = ctx.measureText(cardInfo.tagText);//测量文本信息
        ctx.stroke();
        ctx.rect(left + 10, width - 20, metrics.width + 20, 25);
        ctx.setFillStyle('rgba(255, 255, 255, 0.4)');
        ctx.fill();
      }

      //绘制二维码
      if (codeSrc) {
        ctx.drawImage(codeSrc, left + 160, width + 40, width / 3, width / 3);
        ctx.setFontSize(10);
        ctx.setFillStyle("#000");
        ctx.fillText("微信扫码或长按识别", left + 160, width + 150);
      }
    }).exec()

    setTimeout(function () {
      ctx.draw();
      wx.hideLoading();
    }, 1000)
  },

  /**
   * 点击保存到相册
   */
  bindSavePoster: function () {
    var that = this;
    wx.showLoading({
      title: "正在保存",
      mask: true,
    })
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: "myCanvas",
        success: function (res) {
          wx.hideLoading();
          var tempFilePath = res.tempFilePath;
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,
            success(res) {                         //这里为什么直接用了（res），不是函数吗？
              console.log("image saved");
              //utils.aiCardActionRecord(19);         //这个是什么功能呢?
              wx.showModal({
                content: '图片已保存到相册，赶紧晒一下吧~',
                showCancle: false,
                confirmText: 'OK',
                confirmColor: '#333',
                success: function (res) {
                  if (res.confirm) { }
                },
                fail: function (res) { }
              })
            },
            fail: function (res) {
              wx.showToast({
                title: res.errMsg,
                icon: 'none',
                duration: 2000,
              })
            }
          })
        }
      })
    }, 1000)
  },
})